<template>
  <div class="favorites-container">
    <el-card class="favorites-card">
      <template #header>
        <div class="card-header">
          <span>布布最爱的玩具们</span>
        </div>
      </template>
      
      <div class="favorites-grid">
        <el-card 
          v-for="toy in favoriteToys" 
          :key="toy.id" 
          class="toy-card"
          :body-style="{ padding: '0px' }"
        >
          <img :src="toy.image" class="toy-image">
          <div class="toy-info">
            <h3>{{ toy.name }}</h3>
            <div class="toy-stats">
              <el-tag type="danger" effect="dark">❤️ 最爱</el-tag>
              <el-tag type="warning">{{ toy.playCount }}次</el-tag>
            </div>
            <p class="toy-description">{{ toy.description }}</p>
            <div class="toy-footer">
              <span class="time">喜欢指数：{{ toy.loveLevel }}/5</span>
              <el-rate v-model="toy.loveLevel" disabled show-score />
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const favoriteToys = ref([
  {
    id: 1,
    name: '小熊玩偶',
    image: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    description: '布布最喜欢的睡觉伙伴，每天都要抱着睡觉',
    playCount: 365,
    loveLevel: 5
  },
  {
    id: 2,
    name: '积木城堡',
    image: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    description: '可以搭建各种有趣的造型，激发创造力',
    playCount: 156,
    loveLevel: 4.5
  },
  {
    id: 3,
    name: '音乐小鼓',
    image: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    description: '敲起来咚咚响，布布最爱的音乐玩具',
    playCount: 98,
    loveLevel: 4.8
  }
])
</script>

<style scoped>
.favorites-container {
  padding: 20px;
}

.favorites-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 10px;
}

.toy-card {
  transition: all 0.3s;
  border-radius: 12px;
  overflow: hidden;
}

.toy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.toy-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.toy-info {
  padding: 15px;
}

.toy-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #2c3e50;
}

.toy-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.toy-description {
  color: #666;
  font-size: 14px;
  margin: 10px 0;
  line-height: 1.4;
}

.toy-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.time {
  font-size: 13px;
  color: #999;
  margin-bottom: 5px;
}
</style> 